<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--事件委托原理就是利用的事件冒泡  当需要给多个子元素添加相同事件时 避免代码重复  可以利用事件冒泡原理 给共同父元素添加此事件-->
<!--利用事件对象的target属性去获取当前事件实际执行的对象-->
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <p>woshi</p>
</ul>
<script>
    document.querySelector('ul').addEventListener('click', function (ev) {
        // this.style.backgroundColor = 'blue'; //这里不能用this去获取子元素  因为最终这个this是指向的父元素
        console.log(ev)
        // ev.target.style.backgroundColor = 'red'
        //若再要细分 则可根据事件对象.target.targetName属性去进行过滤
        const tagName = ev.target.tagName;
        console.log(tagName)
        if (tagName === 'LI') {
            ev.target.style.backgroundColor = 'red'
        }
    });
</script>
</body>
</html>